<template>
  <div class="main_right">
    <div class="page_top">
      <section>
        <ol class="breadcrumb">
          <li>
            <router-link to="/nav/welcome">
              <span class="glyphicon glyphicon-home"></span> 首页
            </router-link>
          </li>
          <li>
            <a href>
              <span class="glyphicon glyphicon-stats"></span> 实时监控
            </a>
          </li>
          <li class="active">数据通讯</li>
        </ol>
      </section>
    </div>

    <el-row>
      <el-col>
        <el-select v-model="value" placeholder="请选择">
          <el-option
            v-for="item in options"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          ></el-option>
        </el-select>

        <el-date-picker v-model="value1" type="date" placeholder="选择日期"></el-date-picker>

        <el-button type="primary" round>主要按钮</el-button>
      </el-col>
    </el-row>
    <!-- 仪表盘 -->
    <el-row>
      <el-col :span="12">
        <div style="height:300px" id="myChart"></div>
      </el-col>
    </el-row>
    <!-- 显示表格 -->
    <el-row :gutter="20">
      <el-col :span="12">
        <el-table :data="tableData" stripe >
          <el-table-column prop="date" label="日期" width="180"></el-table-column>
          <el-table-column prop="name" label="姓名" width="180"></el-table-column>
          <el-table-column prop="address" label="地址"></el-table-column>
        </el-table>
      </el-col>
      <el-col :span="12">
        <el-table :data="tableData" stripe >
          <el-table-column prop="date" label="日期" width="180"></el-table-column>
          <el-table-column prop="name" label="姓名" width="180"></el-table-column>
          <el-table-column prop="address" label="地址"></el-table-column>
        </el-table>
      </el-col>
    </el-row>
  </div>
</template>




<script>
export default {
  name: "myChart",
  data() {
    return {
      chart: null,
      // 表格数据
      tableData: [
        {
          date: "2016-05-02",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1518 弄"
        },
        {
          date: "2016-05-04",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1517 弄"
        },
        {
          date: "2016-05-01",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1519 弄"
        },
        {
          date: "2016-05-03",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1516 弄"
        }
      ],
      // 下拉框选项
      options: [
        {
          value: "选项1",
          label: "黄金糕"
        },
        {
          value: "选项2",
          label: "双皮奶"
        },
        {
          value: "选项3",
          label: "蚵仔煎"
        },
        {
          value: "选项4",
          label: "龙须面"
        },
        {
          value: "选项5",
          label: "北京烤鸭"
        }
      ],
      value: "",
      value1: "",

      getOption: function() {
        var option = {
          tooltip: {
            formatter: "{a} <br/>{b} : {c}%"
          },
          toolbox: {
            feature: {
              restore: {},
              saveAsImage: {}
            }
          },
          series: [
            {
              name: "业务指标",
              type: "gauge",
              detail: { formatter: "{value}%" },
              data: [{ value: 50, name: "完成率" }]
            }
          ]
        };
        return option;
      }
    };
  },
  mounted() {
    this.initChart();
  },
  methods: {
    initChart() {
      this.chart1 = this.$echarts.init(document.getElementById("myChart"));

      var option1 = this.getOption();

      this.chart1.setOption(option1);
    }
  }
};
</script>

<style>
  .el-row {
    margin-bottom: 20px;
    
  }
  .el-col {
    border-radius: 4px;
  }
  .bg-purple-dark {
    background: #99a9bf;
  }
  .bg-purple {
    background: #d3dce6;
  }
  .bg-purple-light {
    background: #e5e9f2;
  }
  .grid-content {
    border-radius: 4px;
    min-height: 36px;
  }
  .row-bg {
    padding: 10px 0;
    background-color: #f9fafc;
  }
</style>
<!-- Add "scoped" attribute to limit CSS to this component only -->

